<!-- 
  @description 网站信息管理
  @author cjs
  @date 2021-06-07 09:42:35
-->
<template>
  <div class="app_container">
    <div class="baseBorderRadius baseBoderShadow bgWhite">
      <el-form label-position="right" label-width="100px">
        <el-form-item label="系统名称" required>
          <el-input
            v-model="formData.systemName"
            placeholder="请输入内容"
            clearable
            class="items"
          />
        </el-form-item>
        <el-form-item label="系统ico" required>
          <el-upload
            class="avatar-uploader"
            action="/web/common/upload/uploadFile"
            v-model="formData.ico"
            :show-file-list="false"
            accept="image/png, image/jpeg, image/gif"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="showImgSrc" :src="showImgSrc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="登录页logo" required>
          <el-upload
            class="avatar-uploader"
            v-model="formData.loginLogo"
            action="/web/common/upload/uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess1"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="loginLogoSrc" :src="loginLogoSrc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="系统导航logo" required>
          <el-upload
            class="avatar-uploader"
            v-model="formData.systemLogo"
            action="/web/common/upload/uploadFile"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="systemLogoSrc" :src="systemLogoSrc" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="save_box">
        <el-button type="primary" @click="saveBtn">保存</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { saveWebInfo, getWebInfo } from "@/api/webinfo.js";
export default {
  data() {
    return {
      formData: {
        // 系统名称
        systemName: "",
        ico: "",
        loginLogo: "",
        systemLogo: "",
      },
      showImgSrc: "",
      loginLogoSrc: "",
      systemLogoSrc: "",
      infoLength: 0,
      tempId: "",
    };
  },
  mounted() {
    this.getWebInfo();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      if (res.status === 1000) {
        this.formData.ico = res.data;
        this.showImgSrc =
          "/web/common/upload/getImg?path=" + encodeURIComponent(res.data);
      }
    },
    handleAvatarSuccess1(res, file) {
      if (res.status === 1000) {
        this.formData.loginLogo = res.data;
        this.loginLogoSrc =
          "/web/common/upload/getImg?path=" + encodeURIComponent(res.data);
      }
    },
    handleAvatarSuccess2(res, file) {
      if (res.status === 1000) {
        this.formData.systemLogo = res.data;
        this.systemLogoSrc =
          "/web/common/upload/getImg?path=" + encodeURIComponent(res.data);
      }
    },
    beforeAvatarUpload(file) {
      const isImage =
        ["jpeg", "jpg", "png", "gif"].indexOf(
          file.type.split("/")[1].toLowerCase()
        ) > -1;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message({
          type: "warning",
          message: "上传图片必须为jpg、jpeg、png、gif等图片格式",
        });
      }
      if (!isLt2M) {
        this.$message({
          type: "warning",
          message: "上传图片大小不能超过2MB",
        });
      }
      return isImage && isLt2M;
    },
    /**
     * @name saveBtn
     * @description 保存网站信息
     * @author sykan
     * @date 2021-06-09 10:39:37
     */
    async saveBtn() {
      if (
        this.formData.systemName &&
        this.formData.systemLogo &&
        this.formData.loginLogo &&
        this.formData.ico
      ) {
        let params = {
          systemName: this.formData.systemName,
          systemLogo: this.formData.ico,
          loginLogo: this.formData.loginLogo,
          navigationLogo: this.formData.systemLogo,
        };
        if (this.infoLength) {
          params.id = this.tempId;
        }
        const res = await saveWebInfo(params);
        if (res.status == 1000) {
          this.getWebInfo();
        }
      } else {
        this.$message.warning({
          message: "请完善信息！",
        });
      }
    },
    /**
     * @name getWebInfo
     * @description 获取网站信息
     * @author sykan
     * @date 2021-06-09 10:38:48
     */
    async getWebInfo() {
      const res = await getWebInfo();
      if (res.status == 1000) {
        this.infoLength = res.data.length;
        this.tempId = res.data[0].id;
        this.formData.systemName = res.data[0].systemName;
        this.formData.ico = res.data[0].systemLogo;
        this.formData.loginLogo = res.data[0].loginLogo;
        this.formData.systemLogo = res.data[0].navigationLogo;
        this.showImgSrc =
          "/web/common/upload/getImg?path=" +
          encodeURIComponent(this.formData.ico);
        this.loginLogoSrc =
          "/web/common/upload/getImg?path=" +
          encodeURIComponent(this.formData.loginLogo);
        this.systemLogoSrc =
          "/web/common/upload/getImg?path=" +
          encodeURIComponent(this.formData.systemLogo);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.bgWhite {
  padding: 20px;
}
.avatar-uploader {
  /deep/ {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 80px;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
  }
}
.avatar {
  // width: 1px;
  height: 80px;
  display: block;
}
.save_box {
  margin-left: 100px;
  margin-top: 30px;
}
.items {
  width: 220px;
}
.logo {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
</style>